<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
   </head>

<body>
     <!-- 
         过滤器：
          定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
          语法：
              1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}--配置项
              2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
         备注：
              1、过滤器也可以接收额外参数、多个过滤器也可以串联
              2、并没有改变原来的数据，是产生新的对应的数据     
     -->



    <!--准备好一个容器-->
    <div id="root">
     <h2>显示格式化后的时间</h2>
       <!-- 计算属性实现 -->
     <h3>现在是：{{formatTime}}</h3>
        <!-- methods实现 -->
     <h3>现在是：{{getFormatTime()}}</h3>
        <!--过滤器实现  -->
     <h3>现在是：{{time | timeFormater}}</h3>
        <!--过滤器实现(传参)  -->
     <h3>现在是：{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>

     <h3 :x="msg | mySlice">南风</h3>
    </div>

    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    // 全局的过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

    new Vue({
        el:'#root',
        data:{
            time:1640222549118, // 时间戳
            msg:'你好，南风'
        },
        computed:{
            // 计算属性的简写形式
            formatTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFormatTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        // 局部的过滤器
        filters:{ // 过滤器
            timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){  // value值是当前的time会作为参数传给timeFormater 将timeFormater的返回值放在插值表达式中，替换掉之前的{{time | timeFormater}}
               //console.log("@",value); 测试value值是否和time值一致
               return dayjs(value).format(str)
            },
            // mySlice(value){              
            //    return value.slice(0,4)
            // }

            
        }
    })

    new Vue({
        el:'#root2',
        data:{
            msg:'Hello 南风'
        }
    })

</script>
</html>
